import React, { Fragment, memo, useEffect, useState } from 'react';
import { Breadcrumb, Card, Button, Table } from 'antd';
import { Link } from 'react-router-dom';
import { getRoles } from '../../api';

export default memo(function Roles() {

  const [rolesTableData, setRolesTable] = useState([])
  useEffect(() => {
    reqRoles()
  }, [])

  const reqRoles = async () => {
    const res = await getRoles();
    if (res) {
      setRolesTable(res)
    }
  }
  const addUser = () => {

  }



  const columns = [
    {
      title: '#',
      dataIndex: 'id',

    },
    {
      title: '角色名称',
      dataIndex: 'roleDesc',

    },
    {
      title: '角色描述',
      dataIndex: 'roleName',

    },
    {
      title: '操作',
      key: 'id',
      render: (item) => {
        return <Fragment>
          <Button type='primary'>修改</Button>
          <Button type='primary' style={{ marginLeft: '5px', marginRight: "5px" }}  >删除</Button>
          <Button type='primary'>修改权限</Button>
        </Fragment>
      }
    }
  ];
  const rendererRow = (item) => {
    console.log(item);
    return <p key={item.id}>{item.id}</p>
    // if (item.children.length) {

    //   return <Row key={item.id}>
    //     <Col span={8}>{rendererRow(item.children)} </Col>
    //   </Row>
    // }
    // return <Col key={item.id} span={8}>{item.authName}</Col>

  }

  // function preventDefault(e) {
  //   e.preventDefault();
  //   console.log('Clicked! But prevent default.');
  // }
  // <Tag closable onClose={preventDefault}>
  //     Prevent Default
  //   </Tag>
  return <Fragment>
    <Breadcrumb style={{ marginBottom: '10px' }} >
      <Breadcrumb.Item>
        <Link to='/'>
          首页
        </Link>
      </Breadcrumb.Item>
      <Breadcrumb.Item>权限管理
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        角色列表
      </Breadcrumb.Item>
    </Breadcrumb>
    <Card title={<Button type='primary' size='large' onClick={addUser}>添加角色</Button>}   >
      <Table columns={columns} dataSource={rolesTableData}
        // expandable={{
        //   expandedRowRender: record => rendererRow(record.children),
        // }}
        pagination={{ pageSize: 50, defaultCurrent: 1 }}
      />
    </Card>
  </Fragment>
}
)